<%--
  Created by IntelliJ IDEA.
  User: 小玄
  Date: 2022.08.08
  Time: 16:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="common.jsp"%>
<html>
<head>
    <title>登录页面</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/login.css">
</head>
<body>

<div class="wrap">
<%--    <img src="static/images/back1.jpg" class="imgStyle">--%>
    <div class="loginForm">
        <form>
            <div class="logoHead">
                <h2 style="margin-top: 15px">第9组后台管理系统</h2>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>用户名:</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-username adminIcon"></i>
                    <input id="loginUsername" class="layui-input adminInput" type="text" name="username" placeholder="输入用户名" >
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>密码:</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="loginPassword" class="layui-input adminInput" type="password" name="password" placeholder="输入密码" >
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>验证码:</label>
                </div>
                <div class="cardDiv">
                    <input id="loginCard" class="layui-input cardInput" type="text" name="card" placeholder="输入验证码">
                </div>
                <div class="codeDiv">
                    <input id="loginCode" class="layui-input codeInput"  type="button">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="submitLabel">
                    <label>没有账号？<a href="#" id="loginRegister">联系管理员添加</a></label>
                </div>
                <div class="submitDiv">
                    <input id="loginBtn" type="button" class="submit layui-btn layui-btn-primary" value="登录"></input>
                </div>
            </div>
        </form>
    </div>
</div>


<script>

    layui.use(['layer'],function () {
        var layer = layui.layer;
    })

    $(function () {
        // 页面初始化生成验证码
        window.onload = createCode('#loginCode');
        // 验证码切换
        $('#loginCode').click(function () {
            createCode('#loginCode');
        });
        // 登陆事件
        $('#loginBtn').click(function () {
            login();
        });
        // 注册事件
        $('#loginRegister').click(function () {
            register();
        });
    });

    // 生成验证码
    function createCode(codeID) {
        var code = "";
        // 验证码长度
        var codeLength = 4;
        // 验证码dom元素
        var checkCode = $(codeID);
        // 验证码随机数
        var random = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
            'S','T','U','V','W','X','Y','Z'];
        for (var i = 0;i < codeLength; i++){
            // 随机数索引
            var index = Math.floor(Math.random()*36);
            code += random[index];
        }
        // 将生成的随机验证码赋值
        checkCode.val(code);
    }

    // 校验验证码、用户名、密码
    function validateCode(inputID,codeID) {
        var inputCode = $(inputID).val().toUpperCase();
        var cardCode = $(codeID).val();
        var loginUsername = $('#loginUsername').val();
        var loginPassword = $('#loginPassword').val();
        if ($.trim(loginUsername) == '' || $.trim(loginUsername).length<=0){
            layer.alert("用户名不能为空");
            return false;
        }
        if ($.trim(loginPassword) == '' || $.trim(loginPassword).length<=0){
            layer.alert("密码不能为空");
            return false;
        }
        if (inputCode.length<=0){
            layer.alert("验证码不能为空");
            //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!启用验证码true改成false
            return false;
        }
        if (inputCode != cardCode){
            layer.alert("请输入正确验证码");
            //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!启用验证码true改成false
            return false;
        }
        return true;
    }

    // 登录流程
    function login() {
        if (!validateCode('#loginCard','#loginCode')){
            //阻断提示
        }else {
            var loginUsername = $('#loginUsername').val();
            var loginPassword = $('#loginPassword').val();
            var loginLoadIndex = layer.load(2);
            $('#loginBtn').val("正在登录...");
            //发送Ajax请求，要求校验用户名和密码
            $.ajax({
                url:"${pageContext.request.contextPath}/login/loginVerify.do",
                data:{"username":loginUsername,"password":loginPassword},
                dataType:'JSON',
                type:'POST',
                async:false,
                success:function (data) {
                    if (data.code==0){
                        window.location.href = "${pageContext.request.contextPath}/views/home.jsp";
                        layer.msg("登录成功")
                    }else {
                        $('#loginBtn').val("登录");
                        //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!如果需要登录失败时切换验证码，就把下面一行放开
                        createCode('#loginCode');
                        layer.msg("登录失败，请检查用户名和密码")
                    }
                    layer.close(loginLoadIndex);
                }
            });
        }
    }

    // 联系管理员登录
    function register() {
        layer.open({
            type:'1',
            content:$('.registerPage'),
            title:'管理员信息',
            area:['450px','300px'],
            closeBtn:'1',
        })
    }

</script>

</body>

<%--联系管理模板--%>
<div class="registerPage">
    <form>
        <div class="usernameWrapDiv">
            <div class="usernameLabel"><label>客服电话：</label></div>
            <div class="usernameDiv">
                <i class="layui-icon layui-icon-service adminIcon"></i>
                <input id="registerUsername" class="layui-input adminInput" readonly value="110" >
            </div>
        </div>
        <div class="usernameWrapDiv">
            <div class="usernameLabel"><label>客服邮箱：</label></div>
            <div class="passwordDiv">
                <i class="layui-icon layui-icon-at adminIcon"></i>
                <input id="registerPassword" class="layui-input adminInput" readonly value="3027493148@qq.com">
            </div>
        </div>
    </form>
</div>

</html>
